<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="plugins/layui/css/layui.css"/>
		<script type="text/javascript" src="plugins/layui/layui.js"></script>
		
		<script type="text/javascript" src="plugins/layui/layui/lay/modules/upload.js"></script>
		<style type="text/css">
			body {
				padding: 10px;
			}
			
			.imgsrc {
				height: 30px;
			}
		</style>
	</head>

	<body>
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">商品名称:</label>
				<div class="layui-input-inline">
					<input type="text" name="sprice" required lay-verify="required" placeholder="" class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux">元</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品价格：</label>
				<div class="layui-input-inline">
					<input type="text" name="price" required lay-verify="required" placeholder="1" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux">元</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">商品类型：</label>
				<div class="layui-input-inline">
					<select name="type" lay-verify="required">
						<option value=""></option>
						<option value="0">手机</option>
						<option value="1">电脑</option>
						<option value="2">家居</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">商品图片：</label>
				<div class="layui-upload layui-input-inline">
					<button type="button" class="layui-btn" id="test2">多图片上传</button>
					<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px; width: 450px;">
						预览图：
						<div class="layui-upload-list" id="demo2"></div>
					</blockquote>
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">商品描述：</label>
				<div>
					<textarea name="desc" placeholder="请输入内容" class="layui-textarea"
						style="width: 450px;"></textarea>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">商品积分状态：</label>
				<div class="layui-input-inline">
					<select name="status" lay-verify="required">
						<option value=""></option>
						<option value="0">0</option>
						<option value="1">1</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">商品积分：</label>
				<div class="layui-input-inline">
				<input type="text" name="price" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">商品详细信息：</label>
				<div class="layui-input-inline">
					<textarea id="text" style="display: none;"></textarea>
				</div>
			</div>
			<div>
				<textarea id="text" style="display: none;"></textarea>
			</div>
			<div >
				<label class="layui-form-label">商品介绍：</label>
				<textarea style="width: 450px;"></textarea>
			</div>
			
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">商品品牌：</label>
				<div class="layui-input-inline">
					<select name="brand" lay-verify="required">
						<option class="" value="三星">三星</option>
						<option class="" value="华为">华为</option>
						<option class="" value="西门子">西门子</option>
					</select>
				</div>
			</div>
			<div>
				
				
				
				
			</div>
			
			
			
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>

		<script>
			//Demo
			layui.use(['form', "upload", "laydate", "layedit"], function() {
				var form = layui.form;
				var laydate = layui.laydate;
				var layedit = layui.layedit;
				var $ = layui.jquery,
					upload = layui.upload;
				//监听提交

				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
				var uploadInst = upload.render({
					elem: '#test1',
					url: '/upload/',
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#demo1').attr('src', result); //图片链接（base64）
						});
					},
					done: function(res) {
						//如果上传失败
						if(res.code > 0) {
							return layer.msg('上传失败');
						}
						//上传成功
					},
					error: function() {
						//演示失败状态，并实现重传
						var demoText = $('#demoText');
						demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
						demoText.find('.demo-reload').on('click', function() {
							uploadInst.upload();
						});
					}
				});
				//多图片上传
				upload.render({
					elem: '#test2',
					url: '/upload/',
					multiple: true,
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
						});
					},
					done: function(res) {
						//上传完毕
					}
				});

				//常规用法
				laydate.render({
					elem: '#test3'
				});
				layedit.build('text'); //建立编辑器
			});
		</script>
	</body>

</html>